<template>
  <div class="custom-scrollbar">
    <!-- 内容 -->
    <div class="content"></div>
  </div>
</template>

<style lang="scss">
.custom-scrollbar {
  /* 设置容器的高度和宽度，以便显示滚动条 */
  height: 300px;
  width: 300px;
  /* 设置容器的溢出方式为滚动 */
  overflow: auto;
  /* 隐藏默认的滚动条 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* 设置滚动条颜色为透明 */
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
}

.custom-scrollbar {
  &::-webkit-scrollbar-thumb {
    background-color: transparent; /* 设置滚动条的颜色，这里设置为透明度为 0.2 的黑色 */
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(
      0,
      0,
      0,
      0.2
    ); /* 设置滚动条的颜色，这里设置为透明度为 0.2 的黑色 */
  }
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent; /* 设置滚动条轨道的背景颜色为透明 */
}

.content {
  width: 100%;
  height: 500px;
}
</style>
